<template>
    <div id="cmt-container">

        <h3>发表评论</h3>
        <hr>
        <textarea placeholder="请输入要BB的内容(120字)" maxlength="120" v-model="msg"></textarea>
        
<mt-button type="primary" size="large" @click="postcomment">发表评论</mt-button>


<div class="cmt-list" >
<div class="cmt-item" v-for="(item,i) in comments" :key="item.id">
<div class="cmt-item-title">第{{i+1}}楼 &nbsp;&nbsp; 用户:匿名  &nbsp;&nbsp;时间:{{item.ctime | dataformat}} </div>
<div class="cmt-item-body">{{item.content==""?"此用户很懒，没写评论":item.content}}</div>
</div>
</div>

<mt-button class="cmt-jiazaigengduo" type="danger" size="large" plain @click="getMore" >加载更多</mt-button>

    </div>
</template>

<script>
import { Toast } from "mint-ui";

export default {
  data() {
    return {
      page: 1,
      comments: [],
      msg: ""
    };
  },

  created() {
    this.getcomment();
  },

  methods: {
    getcomment() {
      this.$http
        .get(
          "https://www.apiopen.top/satinCommentApi?id=27610708&page=" +
            this.page
        )
        .then(res => {
          if (res.status === 200) {
            console.log(res.body.data.normal.list);
            this.comments = this.comments.concat(res.body.data.normal.list);
          }
        });
    },

    getMore() {
      this.page++;
      this.getcomment();
    },

    postcomment() {
      if (this.msg.trim().length === 0) {
        return Toast("内容不能为空");
      } else {
        var cmt = {
          content: this.msg.trim(),
          ctime: Date.now()
        };
        this.comments.unshift(cmt);
        this.msg = "";
     
      }

      //    this.$http.post('http://vue.studyit.io/api/postcomment/'+$route.params.id,{
      //      content:this.msg.trim()
      //    }).then(
      //  res=>{
      //  var cmt={
      //    user_name:'匿名用户',
      //    add_time:Date.now(),
      //    content:this.msg.trim
      //  }
      //  this.contents.unshift(cmt)
      //  this.msg="",
      //  }
      //     })
    }
  }

  // props: [""]
};
</script>

<style lang="less" scoped>
#cmt-container {
  .cmt-jiazaigengduo {
    margin-bottom: 70px;
  }

  .h3 {
    font-size: 18px;
  }
  textarea {
    font-size: 14px;
    height: 85px;
    margin-bottom: 0;
  }
  .cmt-list {
    margin: 10px 0;

    .cmt-item {
      font-size: 14px;
    }

    .cmt-item-title {
      line-height: 30px;
      background-color: #ccc;
    }
    .cmt-item-body {
      line-height: 35px;
      text-indent: 2em;
    }
  }
}





</style>
